<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css" />
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/elementui.js"></script>
    <style>
        #app {
            padding-left: 20%;
            width: 750px;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-row style="background-color: rgb(212, 226, 238);padding: 5px;">
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="val" style="width: 440px;"></el-input>
            <el-button @click="search()">搜索</el-button>
        </el-row>
        <hr>
        <el-table v-loading="loading" :data="paginatedTableData" style="width: 100%">
            <el-table-column label="日期" width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
            </el-table-column>
            <el-table-column label="姓名" width="180">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.name }}</p>
                        <p>住址: {{ scope.row.address }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.name }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="图片" width="180">
                <template slot-scope="scope">
                    <img :src="item.imgpath" width="60" height="60" v-for="(item, index) in scope.row.img"
                        :key="item.gid" />
                    <el-button size="mini" @click="handleEditImage(item.gid, index, item.imgpath)"
                        v-for="(item, index) in scope.row.img" :key="item.gid">编辑</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination layout="prev, pager, next" :current-page="currentPage" :page-size="pageSize" :total="total"
            @current-change="handlePageChange" style="text-align: center; margin-top: 20px;"></el-pagination>

        <el-dialog title="地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="ID" :label-width="formLabelWidth">
                    {{form.id}}
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="住址" :label-width="formLabelWidth">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateRow">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="编辑图片" :visible.sync="imageDialogVisible">
            <img :src="currentImgPath" width="60" height="60" />
            <el-upload class="upload-demo" action="http://localhost:8080/boot/uploadImage"
                :data="{ gid: currentImageId, index: currentIndex }" :on-success="handleImageSuccess"
                :show-file-list="false" accept=".jpg,.png" :before-upload="beforeUpload">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </el-dialog>
    </div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            val: '',
            dialogFormVisible: false,
            form: {
                id: '',
                name: '',
                address: '',
                img: [
                    { gid: 1, imgpath: '', tid: 1 },
                    { gid: 2, imgpath: '', tid: 1 }
                ]
            },
            formLabelWidth: '120px',
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            loading: true,
            imageDialogVisible: false,
            currentImageId: '',
            currentImgPath: '',
            currentIndex: -1,
        },
        computed: {
            paginatedTableData() {
                const start = (this.currentPage - 1) * this.pageSize;
                const end = start + this.pageSize;
                return this.tableData.slice(start, end);
            }
        },
        methods: {
            handleEdit(index, row) {
                this.form = { ...row }; // 填充表单数据
                this.dialogFormVisible = true;
            },
            updateRow() {
                const index = this.tableData.findIndex(row => row.id === this.form.id);
                if (index !== -1) {
                    axios.post('http://localhost:8080/boot/upd?id=' + this.form.id + '&name=' + this.form.name + '&address=' + this.form.address).then(res => {
                        console.log(res);
                        // 更新表格数据
                        this.tableData.splice(index, 1, { ...this.form });
                    });
                    this.$message({
                        type: 'success',
                        message: '更新成功!'
                    });
                }
                this.dialogFormVisible = false; // 关闭对话框
            },
            handleDelete(index, row) {
                console.log(index, row);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get('http://localhost:8080/boot/del?id=' + row.id).then(res => {
                        console.log(res);
                        this.tableData.splice(index, 1);
                        this.total = this.tableData.length; // 更新总条数
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    });
                }).catch(() => {
                    this.$message({});
                });
            },
            handlePageChange(newPage) {
                this.currentPage = newPage;
            },
            search() {
                this.loading = true;
                axios.get('http://localhost:8080/boot/getAll?value=' + this.val).then(res => {
                    console.log(res);
                    this.tableData = res.data.data;
                    this.total = this.tableData.length; // 设置总条数
                    this.loading = false;
                });
            },
            handleEditImage(gid, index, imgpath) {
                this.currentImageId = gid;
                this.currentIndex = index;
                this.currentImgPath = imgpath;
                this.imageDialogVisible = true;
            },
            handleImageSuccess(response, file, fileList) {
                // 假设服务器返回新的图片路径
                const newImgPath = response.newImgPath;
                const row = this.tableData.find(row => row.id === this.currentImageId);
                if (row && row.img[this.currentIndex]) {
                    row.img[this.currentIndex].imgpath = newImgPath;
                }
                this.$message({
                    type: 'success',
                    message: '图片上传成功!'
                });
                this.imageDialogVisible = false;

                // 刷新表格数据
                this.search();
            },
            beforeUpload(file) {
                const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';
                const isLt500K = file.size / 1024 < 500;

                if (!isJPGorPNG) {
                    this.$message.error('只能上传 JPG 或 PNG 格式的图片!');
                }
                if (!isLt500K) {
                    this.$message.error('图片大小不能超过 500KB!');
                }
                return isJPGorPNG && isLt500K;
            }
        },
        mounted() {
            this.loading = true;
            axios.get('http://localhost:8080/boot/getAll').then(res => {
                console.log(res);
                this.tableData = res.data.data;
                this.total = this.tableData.length; // 设置总条数
                this.loading = false;
            });
        }
    });
</script>

</html>